<template>
	<view class="container">
		<navbar :config="config" backColor="#000"></navbar>
		<view class="list">
			<radio-group>
				<view v-for="(item,index) in bankList" :key="item.id" @click="backSurePay(item.id)">
					<view class="item "
						:style="'background-image: url('+imgUrl+'/bank/back2k.png' + ')'"
					>
						<!-- <text class="u-ml80">{{item.phone}}</text> -->
						<!-- <view>电<span style="padding-left: 28rpx;">话：</span><text class="u-AAAAAA">{{item.phone}}</text></view> -->
						<view class="itemOne">
							<text>{{item.province_name}}{{item.city_name}}{{item.area_name}}{{item.street_name}}{{item.community_name}}{{item.address}}</text>
						</view>
						<text class="itemTwo">{{item.name}}</text>
						<view class="itemThree"><text>{{item.province_code}}</text></view>

					</view>
					<view class="operation">
						<!-- <view class="u-flex-center" @click="isDefault(item.id)">
						<view class="kuang"> -->
						<!-- <radio color="#FF0000" style="transform:scale(0.7)" :checked="item.is_default" /> -->
						<!-- <image v-if="item.is_default" :src="imgUrl+'/checked.png'" mode="widthFix" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"></image>
						<image v-else :src="imgUrl+'/nocheck.png'" mode="widthFix" style="width: 50rpx;height: 50rpx;"></image> -->
						<!-- <checkbox color="#FF0000" style="transform:scale(0.7)" :checked="item.is_default" /> -->
						<!-- <radio v-else style="transform:scale(0.7)" :checked="false" /> -->
						<!-- </view>
					</view> -->

						<view @click="isDefault(item.id)" class="operationOne">
							<view class="top" v-if="item.is_default">
								<icon type="success" color="#FF0000" size="17"></icon>
							</view>
							
							
							<view class="top" v-else
								style="font-weight: 400;font-size: 23rpx;color: #333333;"></view>
							{{item.is_default?'默认银行卡':'设为默认'}}
						</view>
						<view class="operationTwo">
							<view class="operationTwo-item" style="margin-right: 38rpx;" @click.stop="edit(item.id)">编辑</view>
							<view class="operationTwo-item" @click.stop="del(item.id)">删除</view>
						</view>
					</view>
				</view>
			</radio-group>
		</view>
		<!-- 没有数据 -->
		<view class="nogoods u-mt30 u-flex-column-center" v-if="bankList.length==0">
			<nodata :config="{top:5,content:'您还没有添加银行卡~'}"></nodata>
		</view>
		<view class="add-btn" @click="goAddEditBank">
			<!-- <view class="u-plr30">
				<button class="u-btn-two u-bg-FF721B u-FFF">添加新银行卡</button>
			</view> -->
			<image :src="imgUrl+'/bank/addCard.png'" class="addCard"></image>
			<view>添加银行卡</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '我的银行卡',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"
				},
				bankList: [],
				imgUrl: this.$mConfig.staticUrl
			}
		},
		onLoad() {


		},
		onShow() {
			this.$nextTick(() => {
				this.getBankList()
			})

		},
		methods: {
			//获取地址列表
			async getBankList() {
				let that = this
				this.$http.get('/userbank/list', {}).then(async res => {
					console.log('res', res)
					if (res.code == 200) {
						that.bankList = res.list
					}
				})
			},
			listAddress(e) {
				if (e == 1) {
					this.getBankList()
				}
			},
			//跳转确认下单页面
			backSurePay(id) {
				// uni.setStorageSync('address',item)
				let object = {
					addressid: id
				}
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				if (prevPage.$vm.otherFun) {
					prevPage.$vm.otherFun(object)
				}
				uni.navigateBack({
					delta: 1
				})
				// uni.navigateTo({
				// 	url:'/pages/product/surePay/surePay?addressid='+id
				// })
			},
			//跳转到添加地址
			goAddEditBank() {
				uni.navigateTo({
					url: "addEditBank"
				})
			},
			isDefault(id) {
				let that = this
				this.$http.put('/userbank/set-def/' + id).then(async res => {
					if (res && res.code == 200) {
						uni.showToast({
							title: "修改成功",
							icon: "none",
							duration: 3000,
							success() {
								that.getBankList()
								that.bankList = []
							}
						})
					}
				})
				// if(e.is_default == true){
				// 	e.is_default = false
				// 	that.update(e)
				// }else{
				// 	e.is_default =true
				// 	that.update(e)
				// }

			},
			update(param) {

			},
			//编辑
			edit(id) {
				uni.navigateTo({
					// url: "addEditBank?id=" + id
					url:"addEditBank?id=" + id
				})
			},
			//删除
			async del(id) {
				let that = this
				uni.showModal({
					title: '',
					content: "确定删除银行卡？",
					confirmText: "删除",//这块是确定按钮的文字
					cancelText:"取消",//这块是取消的文字
					confirmColor: "#fff",
					cancelColor: "#FF211F",
					success: (res) => {
						if (res.confirm) {
							this.$http.delete('/userbank/delete/' + id, )
								.then(async res => {
									if (res.code == 200) {
										uni.showToast({
											title: "删除成功",
											icon: "none",
											duration: 3000,
											success() {
												that.getBankList()
											}
										})
									}
								})
						}
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.kuang {
		display: flex;
		align-items: center;
	}

	// .list{
	// 	margin-bottom: 160rpx;
	// }
	.item {
		// margin: 30rpx 30rpx 0 30rpx;
		// padding:30rpx 30rpx 46rpx 30rpx;
		// border-radius: 20rpx;
		background-size: 100% 100%;
		width: 673rpx;
		height: 169rpx;
		margin-top: 19rpx;
		margin-left: 38rpx;

		.itemOne {
			font-weight: 500;
			font-size: 33rpx;
			color: #FFFFFF;
			padding-top: 19rpx;
			padding-left: 19rpx;
			line-height: 33rpx;
		}

		.itemTwo {
			font-weight: 400;
			font-size: 23rpx;
			color: rgba(255, 255, 255, 0.9);
			margin-top: 11rpx;
			margin-left: 19rpx;
			line-height: 23rpx;
		}

		.itemThree {
			font-weight: 600;
			font-size: 35rpx;
			color: #FFFFFF;
			margin-left: 19rpx;
			margin-top: 26rpx;
			line-height: 35rpx;

		}

			}

	.add-btn {
		// width: 100%;
		// position: fixed;
		// bottom: 45rpx;
		width: 673rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-top: 38rpx;
		margin-left: 38rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #333333;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		// button {
		// 	width: 100%;
		// }
	}
	.operation {
			width: 634rpx;
			height: 38rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-left: 57rpx;
			margin-top: 23rpx;
	
			.operationOne {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				width: 300rpx;
				height: 38rpx;
			}
	
			.operationTwo {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				width: 300rpx;
				height: 38rpx;
				.operationTwo-item{
					font-weight: 400;
					font-size: 23rpx;
					color: #333333;
				}
			}
	
			.whole {
				display: flex;
				align-items: center;
			}
	
			/deep/ .uni-icon-success {
				color: RGB(255,34,32) !important;
			}
	
			.top {
				display: flex;
				align-items: center;
				margin-right: 10rpx;
			}
		}
		.addCard{
			width: 35rpx;
			height: 35rpx;
			margin-right: 11rpx;
		}
		
		
	
</style>